<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            height: 300px;
            background-color: rgba(1, 50, 50, 0.5);
            padding: 20px;
            margin: 100px auto;
        }

        .sub div {
            margin-bottom: 30px;
            position: relative;
        }

        .sub span {
            font-size: 12px;
            position: absolute;
            left: 0px;
            top: 30px;
            display: none;
        }

        .sub .erro {
            display: block;
            color: red;

        }

        .sub .right {
            display: block;
            color: aqua;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <form class="sub" action="javascript:;" method="get">
            <div>
                <p>用户名：<input type="text" class="user"></p>
                <span class="useSpan">用户名由6-12字母数字下划线组成，不能以数字开头</span>
            </div>
            <div>
                <p>密&emsp;码：<input type="password" class="pwd"></p>
                <span class="pwdSpan">密码由6-12字母数字下划线组成</span>
            </div>
            <div>
                <p>手机号：<input type="text" class="phone"></p>
                <span class="phoneSpan">请输入正确的手机号</span>
            </div>
            <div>
                <p>邮&emsp;箱：<input type="text" class="email"></p>
                <span class="emailSpan">请输入正确的邮箱</span>
            </div>
            <input type="submit" class="subBtn" value="注册">
            <input type="reset" class="reBtn" value="取消">
        </form>
    </div>

</body>
<script>
    var user = document.getElementsByClassName("user")[0];
    var useSpan = document.getElementsByClassName("useSpan")[0];
    var pwd = document.getElementsByClassName("pwd")[0];
    var pwdSpan = document.getElementsByClassName("pwdSpan")[0];
    var phone = document.getElementsByClassName("phone")[0];
    var phoneSpan = document.getElementsByClassName("phoneSpan")[0];
    var email = document.getElementsByClassName("email")[0];
    var emailSpan = document.getElementsByClassName("emailSpan")[0];
    var subBtn = document.getElementsByClassName("subBtn")[0];
    var sub = document.getElementsByClassName("sub")[0];
    var body = document.getElementsByTagName("body")[0];

    // 随机背景颜色
    // var r = Math.round(Math.random()*255);
    // var g = Math.round(Math.random()*255);
    // var b = Math.round(Math.random()*255);
    // var a = parseFloat(Math.random().toFixed(1));
    // console.log(r,g,b,a);
    // body.style.backgroundColor = `rgba(${randColor()}, ${randColor()}, ${randColor()},0.5)`;
    body.style.backgroundColor = randColor();
    function randColorgb() {
        return Math.round(Math.random() * 255);
    }

    function randColor() {
        var str = "0123456789abcdef";
        var colorStr = "#";
        for (var i = 0; i < 6; i++) {
            var index = Math.floor(Math.random() * str.length);
            var char = str.charAt(index);
            colorStr += char;
        }
        return colorStr;
    }


    var isUserOk;
    var isPwdOk;
    var isPhoneOk;
    var isEmailOk;
    // 用户名
    user.oninput = function () {
        isUserOk = false;
        var reg = /^[a-zA-Z_][\w]{5,11}$/;
        var str = user.value;
        if (reg.test(str)) {
            useSpan.textContent = "用户名格式正确";
            useSpan.className = "right";
            isUserOk = true;
        } else {
            useSpan.className = "erro";
        }
        // isDisabled();
    }

    // 密码
    pwd.oninput = function () {
        isPwdOk = false;
        var reg = /^[0-9a-zA-Z]{6,12}$/;
        var str = pwd.value;
        // console.log(reg.test(str));

        var flag1 = /[A-Z]/.test(str) ? true : false;
        var flag2 = /[a-z]/.test(str) ? true : false;
        var flag3 = /[0-9]/.test(str) ? true : false;
        var sum = flag1 + flag2 + flag3;

        if (!(reg.test(str))) {
            pwdSpan.className = "erro";
        } else {
            switch (sum) {
                case 1:
                    pwdSpan.innerText = "密码强度:弱";
                    pwdSpan.style.color = "orange";
                    break;
                case 2:
                    pwdSpan.innerText = "密码强度:中";
                    pwdSpan.style.color = "greenyellow";
                    break;
                case 3:
                    pwdSpan.innerText = "密码强度:强";
                    pwdSpan.style.color = "palegreen";
                    break;
            }
            isPwdOk = true;
        }
    }

    // 手机号
    phone.oninput = function () {
        isPhoneOk = false;
        var reg = /^1[3-9]\d{9}$/;
        var str = phone.value;
        if (reg.test(str)) {
            phoneSpan.textContent = "手机号格式正确";
            phoneSpan.className = "right";
            isPhoneOk = true;
        } else {
            phoneSpan.className = "erro";
        }
    }

    // 邮箱
    email.oninput = function () {
        isEmailOk = false;
        var reg = /^\w{6,12}@\w{2,8}\.(com|cn|net)$/;
        var str = email.value;
        if (reg.test(str)) {
            emailSpan.textContent = "邮箱号格式正确";
            emailSpan.className = "right";
            isEmailOk = true;
        } else {
            emailSpan.className = "erro";
        }
    }

    subBtn.onclick = function () {
        if (isUserOk && isPwdOk && isPhoneOk && isEmailOk) {
            // sub.action = "./login.html";
            alert("注册成功");
        }
    }
</script>

</html>